<template>
  <!-- 17、所有页面添加骨架屏效果 -->
  <van-skeleton title avatar :row="3" :loading="loading">
    <div>
      <!-- 7、实现我的页面排版，用户信息从pinia中获取 -->
      <van-nav-bar
        title="我的京东"
        left-arrow
        @click-left="() => $router.back()"
      >
        <template #right> ... </template>
      </van-nav-bar>
      <div class="photo">
        <van-image
          round
          width="5rem"
          height="5rem"
          :src="store.userInfo.photo"
        />
        <p class="p1">{{ store.userInfo.username }}</p>
        <p class="p2">
          <span class="yin">银牌会员></span>
          <span class="xiao">小白守护755分</span>
        </p>
      </div>
      <img src="../assets/1.png" alt="" />
    </div>
  </van-skeleton>
</template>
<script setup>
import { useCounterStore } from "@/store/index";
import { ref, onMounted } from "vue";

const store = useCounterStore();

const loading = ref(true);
onMounted(() => {
  setTimeout(() => {
    loading.value = false;
  }, 800);
});
</script>
<style scoped lang='scss'>
:deep(.van-nav-bar__right) {
  font-size: 30px;
  margin-bottom: 15px;
}
.photo {
  margin-top: 20px;
  margin-left: 20px;
  .van-image {
    float: left;
  }
  .p1 {
    width: 100px;
    margin-left: 100px;
    font-size: 30px;
    margin-top: -2px;
  }
  .p2 {
    margin-left: 100px;
    margin-top: -20px;
    font-size: 15px;
    .yin {
      border: 1px solid #000;
      border-radius: 20px;
      margin-right: 10px;
    }
    .xiao {
      border: 1px solid #000;
      border-radius: 20px;
    }
  }
}
img {
  width: 100%;
}
</style>